import userService from '@/services/userService';
<template>
  <div class="integral-box">
    <div class="top-integral">
      <div class="total">{{totalIntegral}}</div>
      <p class="tips">我的积分</p>
      <div class="exchange" @click="goDuiBa">去兑换</div>
    </div>
    <div class="title-box">
      <div class="line"></div>
      <div class="title">积分明细</div>
    </div>
    <div class="integral-list">
      <van-list 
        v-model="loading" 
        :finished="finished" 
        :finished-text="finished && !list.length ? '' : '--没有更多了--'" 
        @load="onLoad">
          <div class="item scale-1px-bottom" v-for="(item,index) in list" :key="index">
            <div class="info">
              <p class="source">{{item.type | formatType}}</p>
              <p class="time">{{item.createTime | formatTime}}</p>
            </div>
            <div class="detail">{{item.integral }}</div>
          </div>
      </van-list>
    </div>
    <div class="nodata" v-show="!list.length && nodataStatus">
      <img src="../../assets/img/article/noarticle.png" alt="">
      <p>对不起，没有查询到积分明细！</p>
    </div>
  </div>
</template>

<script>
import integralService from 'SERVICE/integralService'
export default {
  data () {
    return {
      list: [],
      totalIntegral: 0,
      loading: false,
      finished: false,
      size: 15,
      current: 1,
      pages: 1,
      nodataStatus: false,
      autoLoginUrl: '' //兑吧活动地址
    }
  },
  created () {
    this.autoLogin()
    this.getMyTotalIntegral()
  },
  methods: {
    // 加载更多
    async onLoad() {
      if (this.current > this.pages) {
        // 加载状态结束
        this.finished = true
        this.loading = false
      } else {
        await this.getIntegralList()
      }
    },
    // 获取我的积分
    getIntegralList () {
      integralService.getIntegralList({
        current: this.current,
        size: this.size
      }).then(res => {
        this.pages = res.pages
        if (this.current === 1) {
          this.list = res.records
        } else {
          this.list.push(...res.records)
        }
        this.loading = false
        this.current += 1
        this.nodataStatus = true
      }).catch(err => {})
    },
    // 获取兑吧活动地址
    autoLogin () {
      integralService.autoLogin({redirect: ''}).then(res => {
        this.autoLoginUrl = res
      }).catch(err => {})
    },
    // 跳转兑吧系统
    goDuiBa () {
      window.location.href = this.autoLoginUrl
    },
    // 获取我的总积分
    getMyTotalIntegral () {
      integralService.getMyTotalIntegral({}).then(res => {
        this.totalIntegral = res.totalIntegral 
      }).catch(err => {})
    }
  },
  filters: {
    formatType (val) {
      // ：0-签到活动，1-积分兑换， 2-其他活动
      let status = {
        0: '签到活动',
        1: '积分兑换',
        2: '其他活动',
        3: '访问记录'
      }
      return status[val] || '签到活动'
    },
    formatTime (val) {
      let time = ''
      if (val) {
        let date = new Date(+val)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        let d = date.getDate()
        let t = date.toTimeString().split(' ')[0]
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        time = `${y}-${m}-${d} ${t}`
      }
      return time
    }
  }
}
</script>

<style lang="less" scoped>
.integral-box{
  font-family:'PingFangSC','PingFangSC-Regular','Microsoft YaHei';
  .top-integral{
    height:123px;
    width: 100%;
    background:linear-gradient(90deg,rgba(239,146,53,1) 0%,rgba(235,93,42,1) 100%);
    color: #fff;
    text-align: center;
    position: relative;
    .total{
      height:45px;
      font-size:32px;
      font-weight:400;
      color:rgba(255,255,255,1);
      line-height:45px;
      padding-top: 32px;
      box-sizing: content-box;
    }
    .tips{
      height:17px;
      font-size:12px;
      font-weight:400;
      color:rgba(253,244,205,1);
      line-height:17px;
    }
    .exchange{
      position: absolute;
      right: 0;
      top: 47px;
      width:69px;
      height:30px;
      line-height: 30px;
      text-align: center;
      background:rgba(248,219,123,1);
      border-radius:15px 0px 0px 15px;
      font-size:13px;
      font-weight:600;
      color:rgba(124,92,36,1);
    }
  }
  .title-box{
    margin: 20px 16px;
    display: flex;
    align-items: center;
    .line{
      width:3px;
      height:13px;
      background:rgba(235,93,42,1);
      border-radius:2px;
    }
    .title{
      flex: 1;
      height:16px;
      font-size:16px;
      font-weight:600;
      color:rgba(51,51,51,1);
      line-height:16px;
      margin-left: 10px;
    }
  }
  .integral-list{
    margin: 0 16px;
    .item{
      height:75px;
      background:rgba(255,255,255,1);
      display: flex;
      align-items: center;
      .info{
        flex: 1;
        .source{
          height:16px;
          font-size:16px;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:16px;
        }
        .time{
          height:16px;
          font-size:12px;
          font-weight:400;
          color:rgba(153,153,153,1);
          line-height:16px;
          margin-top: 5px;
        }
      }
      .detail{
        height:16px;
        font-size:20px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:16px;
      }
    }
  }
  .nodata {
    padding-top: 50px;
    text-align: center;
    color: #999;
    font-size: 12px;
    img {
      width: 88px;
      height: 88px;
      margin-bottom: 5px;
    }
  }
}
</style>
